<!DOCTYPE html>
<html lang="en">
<!--    课程：黑马程序员  《4个小时带你快速入门vue》
        地址：https://www.bilibili.com/video/BV12J411m7MG -->
<!-- P27 ~ P29-->

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>天知道</title>
  <link rel="stylesheet" href="./css/reset.css" />
  <link rel="stylesheet" href="./css/index.css" />
</head>

<body>

  <div class="wrap" id="app">
    <div class="search_form">
      <div class="logo"><img src="images/logo.png" alt="logo" /></div>
      <div class="form_group">
        <input type="text" v-model="city" @keyup.enter="searchWeather" class="input_txt" placeholder="请输入查询的天气" />
        <button class="input_sub" @click="searchWeather">
          搜 索
        </button>
      </div>
      <div class="hotkey">
        <a href="javascript:;" @click="changeCity('北京')">北京</a>
        <a href="javascript:;" @click="changeCity('上海')">上海</a>
        <a href="javascript:;" @click="changeCity('广州')">广州</a>
        <a href="javascript:;" @click="changeCity('深圳')">深圳</a>
      </div>
    </div>
    <ul class="weather_list">
      <li v-for="item in weatherList">
        <div class="info_type"><span class="iconfont">{{ item.wea }}</span></div>
        <div class="info_temp">
          <!-- <b>{{ item.low }}</b>
              ~
              <b>{{ item.high }}</b> -->
          <b>{{item.narrative}}</b>
        </div>
        <div class="info_date"><span>{{ item.date+" "+item.week }}</span></div>
      </li>
    </ul>
  </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->
    <script src="../js/vuev2.7.14.js"></script>
  <!-- 官网提供的 axios 在线地址 -->
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <!-- 自己的js -->
  <script src="./js/main.js"></script>
<!-- 总结
  应用的逻辑代码建议和页面分离，使用单独的is文件编写
  axios回调函数中this指向改变了，需要额外的保存一份
  服务器返回的数据比较复杂时，获取的时候需要注意层级结构
-->

</body>


</html>